<template>
  <div>
    <button @click="addNum(2)">+</button>
    <!-- {{ $store.state.num }} -->
    {{ num }}
    <button @click="reduceNum(3)">-</button>

    <button @click="set_arr([4,5,6,7])">异步改变数据</button>

    <ul>
      <li v-for="item in arr" :key="item">
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>

import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  /* methods: {
    add () {
      this.$store.commit('addNum',2)
    },
    reduce () {
     this.$store.commit('reduceNum',3)
    },
     addNum () {
     this.$store.commit('addNum',2)
    },
    reduceNum () {
      this.$store.commit('reduceNum',3)
    } 
  }, */
  methods: {
    ...mapMutations(['addNum','reduceNum']),
    ...mapActions(['set_arr'])
    /* addNumAsync(){
      // 触发 action
      this.$store.dispatch('set_arr',2)
    } */
  },
  mounted () {
    //console.log(mapState(['num','num2']))
    console.log(mapMutations(['addNum','reduceNum']))
    /* 
    mapMutations(['addNum','reduceNum'])
    {
      addNum(store,n){
        store.commit('addNum',n)
      },
      reduceNum(store,n){
        store.commit('reduceNum',n)
      },
    }
    
    */
    /* 
    (mapState(['num','num2'])

    {
      num(state){  //state就是 store中的state
        return state.num
      },
      num2(state){
        return state.num2
      },

    }
    */
  },
  computed: {
    ...mapState(['num','arr'])
  },
  /* computed: {
    num () {
      return this.$store.state.num
    }
  } */
}
</script>

<style lang="scss" scoped>

</style>
